<template>
	<view class="ciuc">
		<view class="ciucMain">
			<view class="ciucMainHead">
				<view class="ciucMainHeadLeft">
					<view class="ciucMainHeadLeft-top font_blod">
						{{dat.storeName}}
					</view>
					<view class="ciucMainHeadLeft-phone">
						<text class="ciucMainHeadLeft-phone-txt1">手机号</text>
						<text>:</text>
						<text class="ciucMainHeadLeft-phone-txt2 font_blod">{{dat.storePhone}}</text>
					</view>
				</view>
				<view class="ciucMainHeadRight">
					<image class="ciucMainHeadRight-img" src="https://www.zzzsyh.com/applets/agent/agent/head.png"
						mode=""></image>
				</view>
			</view>
			<view class="ciucMainTeacher">
				<text class="ciucMainTeacher-title">负责人</text>
				<text>:</text>
				<text class="ciucMainTeacher-con font_blod">{{dat.storePerson}}</text>
			</view>
			<view class="ciucMainArea">
				<view class="ciucMainAreaLeft">
					<text class="ciucMainAreaLeft-title">提成区域</text>
					<text>:</text>
				</view>
				<view class="ciucMainAreaRight">
					<view class="ciucMainAreaRightLi" v-for="(item, index) of list" :key="index">
						<view class="ciucMainAreaRightLiTxt font_blod">
							{{item.pName}}{{item.cName}}{{item.aName}}
						</view>
						<image @click="cli_close_list(item, index)" class="ciucMainAreaRightLiImg"
							src="https://www.zzzsyh.com/applets/agent/agent/close_drop.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="ciucMainBtn font_blod">
				<view class="ciucMainBtnLeft" @click="cli_save">
					去升级
				</view>
				<view class="ciucMainBtnRight" @click="cli_add">
					<image class="ciucMainBtnRight-img" src="https://www.zzzsyh.com/applets/agent/agent/add_2.png"
						mode=""></image>
					<text class="ciucMainBtnRight-txt">添加区域</text>
				</view>
			</view>
		</view>
		<Address :show_="show_" ref="getChild" @childer="childer_address" @childerList="getAddressList"></Address>
	</view>
</template>

<script>
	import allapi from '../../api/index.js'
	import Address from './../../components/address/index.vue'
	export default {
		data() {
			return {
				show_: false,
				agentId: uni.getStorageSync('agentId'),
				id: '',
				list: [],
				dat: {},
			}
		},
		onLoad(val) {
			this.id = val.id
		},
		components: {
			Address
		},
		mounted() {
			// 获取数据详情
			this.getPartsStoreDetails()
		},
		methods: {
			// 点击删除区域
			cli_close_list(item, index) {
				console.log('删除了', item, index);
				this.list.splice(index, 1)
			},
			// 点击添加区域
			cli_add() {
				this.$refs.getChild.cli_goaddress()
				this.show_ = true
			},
			// 选择地址的值
			childer_address(e) {
				console.log(e);
				this.show_ = e
			},
			getAddressList(e) {
				let dat = this.list
				let list = this.list.concat(e)
				let arr = this.getdistinct(list)
				this.list = arr
			},
			getdistinct(arr) {
				let result = [],
					j,
					len = arr.length;
				for (var i = 0; i < arr.length; i++) {
					for (j = i + 1; j < len; j++) {
						if (arr[i].aCode === arr[j].aCode) {
							j = ++i;
						}
					}
					result.push(arr[i]);
				}
				return result;
			},
			// 查看配件点详情
			getPartsStoreDetails() {
				uni.request({
					url: allapi.getPartsStoreDetails,
					data: {
						id: this.id
					},
					success: (res) => {
						this.dat = res.data.data
					}
				})
			},
			// 保存-配件店升级为市县
			cli_save() {
				let list = this.list
				if (list.length > 0) {
					this.upgradeCityPartsStore()
				} else {
					uni.showToast({
						title: '请先添加区域',
						icon: 'none'
					})
				}
			},
			upgradeCityPartsStore() {
				let areaJson = this.list
				uni.request({
					url: allapi.upgradeCityPartsStore,
					data: {
						id: this.id,
						areaJson: areaJson
					},
					success: (res) => {
						console.log(res);
						let code = res.data.code
						if (code == 0) {
							uni.navigateBack()
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
		}
	}
</script>

<style scoped>
	.ciuc {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: linear-gradient(180deg, #FDD194 0%, #F6F6F6 100%);
	}

	.ciucMain {
		margin: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 50rpx 48rpx;
	}

	.ciucMainHead {
		display: flex;
		padding-bottom: 24rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.ciucMainHeadLeft {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.ciucMainHeadLeft-phone {
		font-size: 28rpx;
		color: #666666;
		font-weight: 400;
		line-height: 40rpx;
		display: flex;
		align-items: center;
	}

	.ciucMainHeadLeft-phone-txt1 {
		letter-spacing: 4rpx;
		width: 120rpx;
		text-align: justify;
		text-align-last: justify;
		display: block;
	}

	.ciucMainHeadLeft-phone-txt2 {
		color: #333333;
		margin-left: 10rpx;
	}

	.ciucMainHeadRight {}

	.ciucMainHeadRight-img {
		width: 144rpx;
		height: 144rpx;
		border-radius: 50%;
	}

	.ciucMainTeacher {
		height: 90rpx;
		border-bottom: 1rpx solid #EEEEEE;
		line-height: 90rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}

	.ciucMainTeacher-title {
		color: #666666;
		font-weight: 400;
		width: 120rpx;
		text-align: justify;
		text-align-last: justify;
		display: block;
	}

	.ciucMainTeacher-con {
		color: #333333;
		margin-left: 10rpx;
	}

	.ciucMainArea {
		font-size: 28rpx;
		display: flex;
		align-items: flex-start;
		min-height: 170rpx;
		padding-top: 32rpx;
	}

	.ciucMainAreaLeft {
		display: flex;
		align-items: center;
	}

	.ciucMainAreaLeft-title {
		color: #666666;
		font-weight: 400;
		width: 120rpx;
		text-align: justify;
		text-align-last: justify;
		display: block;
	}

	.ciucMainAreaRight {
		margin-left: 10rpx;
		flex: 1;
		overflow: auto;
	}

	.ciucMainAreaRightLi {
		display: flex;
		margin-bottom: 10rpx;
	}

	.ciucMainAreaRightLiTxt {
		flex: 1;
	}

	.ciucMainAreaRightLiImg {
		width: 32rpx;
		height: 32rpx;
	}

	.ciucMainBtn {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.ciucMainBtnLeft {
		width: 208rpx;
		height: 72rpx;
		background: linear-gradient(180deg, #F8BA70 0%, #FB862F 100%);
		border-radius: 36rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		line-height: 72rpx;
		text-align: center;
	}

	.ciucMainBtnRight {
		width: 256rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: linear-gradient(180deg, #F27E75 0%, #E22F48 100%);
		border-radius: 36rpx;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.ciucMainBtnRight-img {
		width: 28rpx;
		height: 28rpx;
		margin-right: 26rpx;
	}

	.ciucMainBtnRight-txt {
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.add-pop-btm {
		width: 100%;
		height: 960rpx;
		background: #fff;
		border-top-right-radius: 24rpx;
		border-top-left-radius: 24rpx;
	}

	.apb-head {
		height: 92rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;
		margin: 0 24rpx;
	}

	.apb-head-txt {
		color: #333333;
		font-size: 30rpx;
	}

	.apb-head-img {
		width: 48rpx;
		height: 48rpx;
	}

	.apd-chan {
		height: 96rpx;
		align-items: center;
		display: flex;
		font-size: 28rpx;
		color: #333333;
		padding: 0 24rpx;
		border-top: 2rpx solid #DDDDDD;
		border-bottom: 2rpx solid #DDDDDD;
	}

	.apd-chan-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-right: 48rpx;
	}

	.apd-chan-txt {
		height: 56rpx;
		line-height: 56rpx;
		margin-bottom: 6rpx;
	}

	.apd-chan-btm {
		width: 56rpx;
		height: 4rpx;
		background: #FFFFFF;
		border-radius: 2rpx;
	}

	.apdChanBtmColor {
		background: #F76B1F !important;
	}

	.apd-li-box {
		padding: 20rpx 24rpx;
		overflow: auto;
		height: 620rpx;
	}

	.apd-li {
		height: 80rpx;
		color: #333333;
		line-height: 80rpx;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.apdLiTxt {
		color: #F76B1F !important;
	}

	.apd-li-img {
		width: 40rpx;
		height: 30rpx;
	}
</style>
